<template>
    <!--面包屑-->
    <div style="margin-bottom: 30px">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/Main' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>
            <router-link to="/Settlements/InputInvoiceShow">进项发票管理</router-link>
        </el-breadcrumb-item>
        <el-breadcrumb-item>修改进项发票</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <el-form :model="form" label-width="auto" style="max-width: 600px" ref="ruleFormRef" :rules="rules">
        <el-form-item label="开票单位:" prop="invoicingUnit">
            <el-input v-model="form.invoicingUnit" placeholder="请输入开票单位" />
        </el-form-item>
        <el-form-item label="发票类型:" style="width: 1000px;" prop="invoiceType">
            <el-radio-group v-model="form.invoiceType">
                <el-radio :value="1">普通发票</el-radio>
                <el-radio :value="2">增值税发票</el-radio>
            </el-radio-group>
        </el-form-item>
        <el-form-item label="发票金额:" prop="invoiceValue">
            <el-input v-model="form.invoiceValue" placeholder="请输入发票金额" />
        </el-form-item>
        <el-form-item label="税率:" prop="taxRate">
            <el-col :span="23"><el-input v-model="form.taxRate" placeholder="请输入税率" /></el-col> <el-col :span="1">%</el-col>
        </el-form-item>
        <el-form-item label="税额:">
            <el-input v-model="tax" disabled/>
        </el-form-item>
        <el-form-item label="开票日期:" prop="invoicingDate">
            <el-col :span="11">
                <el-date-picker v-model="form.invoicingDate" value-forma="YYYY-MM-DD" type="date" placeholder="请选择开票日期" style="width: 100%" />
            </el-col>
        </el-form-item>
        <el-form-item label="备注:">
            <el-input v-model="form.notes" type="textarea" placeholder="请输入备注信息" />
        </el-form-item>
        <el-form-item style="margin-left: 20%;">
            <el-button type="primary" @click="submitForm(ruleFormRef)">提交</el-button>
            <el-button @click="router.push('InputInvoiceShow')">取消</el-button>
        </el-form-item>
    </el-form>
</template>
<script setup lang="ts">
import { ref, reactive, onMounted,computed } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import axios from 'axios'
import { ElMessage, ElMessageBox } from 'element-plus'
const router = useRouter()
const route = useRoute()
const form = reactive({
    createdBy: "张三",  // 创建人   
    createdDate: new Date(),    // 创建日期
    updatedBy: "张三",  // 更新人
    updatedDate: new Date(),     // 更新日期
    // deletedBy: "",  // 删除人
    // deletedDate: "",    // 删除日期
    isDeleted: false,        // 是否删除
    invoiceId: route.query.invoiceId, // 发票ID
    companyID: "", // 公司ID
    user_Id: 0, // 用户ID
    invoiceNumber: "", // 发票号码
    invoicingUnit: "", // 开票单位
    customerName: "", // 客户名称
    invoiceType: '', // 发票类型
    invoiceValue: '', // 发票金额
    taxRate: '', // 税率 
    invoicingDate: "",  // 开票日期
    notes: "",  // 备注
    invoiceCreator: "李四", // 开票人
    invoiceClassify: 1, // 发票分类
})

//计算税额
const tax= computed(()=>{
    return form.invoiceValue*form.taxRate/100;
})
//返填
const getInvoiceModel=()=>{
    axios.get("/jread/api/Invoice/Backfill?InvoiceId="+form.invoiceId)   
    .then(res=>{
        form.createdBy= res.data.data.createdBy;
        form.createdDate= res.data.data.createdDate;
        // form.updatedBy= res.data.data.updatedBy;
        // form.updatedDate= res.data.data.updatedDate;
        // form.deletedBy= res.data.data.deletedBy;
        // form.deletedDate= res.data.data.deletedDate;
        form.isDeleted= res.data.data.isDeleted;
        form.invoiceId= res.data.data.invoiceId;
        form.companyID= res.data.data.companyID;
        form.user_Id= res.data.data.user_Id;
        form.invoiceNumber= res.data.data.invoiceNumber;
        form.invoicingUnit= res.data.data.invoicingUnit;
        form.customerName= res.data.data.customerName;
        form.invoiceType= res.data.data.invoiceType;
        form.invoiceValue= res.data.data.invoiceValue;
        form.taxRate= res.data.data.taxRate;
        form.invoicingDate= res.data.data.invoicingDate;
        form.notes= res.data.data.notes;
        form.invoiceClassify= res.data.data.invoiceClassify;
        form.invoiceCreator= res.data.data.invoiceCreator;
    })
    .catch(err=>{
        console.log(err);
    })
}

//表单校验
import type { ComponentSize, FormInstance, FormRules } from 'element-plus'
const ruleFormRef = ref<FormInstance>()
const rules = reactive<FormRules>({
    invoicingUnit: [
        { required: true, message: '开票单位不能为空', trigger: 'blur' },
    ],
    invoiceType: [
        { required: true, message: '发票类型不能为空', trigger: 'blur' },
    ],
    invoiceValue: [
        { required: true, message: '发票金额不能为空', trigger: 'blur' },
    ],
    taxRate: [
        { required: true, message: '税率不能为空', trigger: 'blur' },
    ],
    invoicingDate: [
        { required: true, message: '开票日期不能为空', trigger: 'blur' },
    ],
})
//修改
const submitForm = async (formEl: FormInstance | undefined) => {
    if (!formEl) return
    await formEl.validate((valid, fields) => {
        if (valid) {
            // var date1 = new Date().toISOString().slice(0, 10).replaceAll("-", "");
            // var date2 = new Date().toISOString().slice(11, 17).replaceAll(":", "");
            // form.invoiceNumber = "JX" + date1 + date2;
            // console.log(form);

            axios.post('/swrite/api/Invoice/Update',form)
            .then(res=>{
                if(res.data.code == 0)    {
                    ElMessage.success('添加成功');  
                    router.push('/Settlements/InputInvoiceShow')
                }
            })
            .catch(err=>{
                console.log(err);
            })
        } else {
            console.log('error submit!', fields)
        }
    })
}


onMounted(() => {
    getInvoiceModel();
})
</script>